<!DOCTYPE html>
<html lang="en" ng-app="myForm">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <script src="../bower_components/jquery/dist/jquery.min.js" type="text/javascript"></script>
    <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="../bower_components/angular/angular.min.js" type="text/javascript"></script>
</head>
<body class="container">
<div ng-controller="myController" class="panel-default">
    <form role="form" name="firstForm" novalidate>
        <div class="form-group"
             ng-class="{'has-error':firstForm.username.$invalid && firstForm.username.$dirty,
             'has-success':firstForm.username.$valid}">
            <label for="username">用户名</label>
            <!--ng-pattern是否匹配成功（可以写正则）-->
            <input type="text" class="form-control"
                   id="username" name="username" placeholder="用户名" ng-required="true" ng-maxlength="6"
                   ng-minlength="3" ng-model="user.name" ng-pattern="/^\d+$/"/>
        </div>
        <div class="form-group"
             ng-class="{'has-error':firstForm.username.$invalid && firstForm.username.$dirty,
             'has-success':firstForm.username.$valid}">
            <label for="usernum">编号</label>
            <!--ng-pattern是否匹配成功（可以写正则）-->
            <input type="number" class="form-control"
                   id="usernum" name="username" placeholder="用户名" ng-required="true" ng-maxlength="6"
                   ng-minlength="3" ng-model="user.num" ng-pattern="/^\d+$/"/>
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
        <pre>{{firstForm | json}}</pre>
        <pre>{{firstForm.username | json}}</pre>
    </form>
</div>
</body>
<script>
    var app = angular.module('myForm', []);
    app.controller('myController', function ($scope) {
        //表单中的属性(如：{{name}}）都是scope上的属性
        $scope.user = {
            name: ''
        }

    })
</script>
</html>